<template>
  <div class="navigation-test">
    <h1>页面跳转测试</h1>
    
    <div class="test-section">
      <h2>基本页面跳转测试</h2>
      <div class="button-group">
        <button @click="navigateTo('/')" class="test-btn">首页</button>
        <button @click="navigateTo('/login')" class="test-btn">登录页</button>
        <button @click="navigateTo('/register')" class="test-btn">注册页</button>
        <button @click="navigateTo('/news')" class="test-btn">新闻页</button>
        <button @click="navigateTo('/problems')" class="test-btn">题目页</button>
      </div>
      
      <h3>编辑器页面测试（重点测试）</h3>
      <div class="button-group">
        <button @click="navigateTo('/goc-editor')" class="test-btn editor-test">GOC编辑器</button>
        <button @click="navigateTo('/goc-judge')" class="test-btn editor-test">GOC判题</button>
        <button @click="navigateTo('/problems')" class="test-btn editor-test">题目列表</button>
        <button @click="navigateTo('/problem/1')" class="test-btn editor-test">题目详情</button>
      </div>
      <p class="test-note">⚠️ 这些页面之前会导致跳转卡死，现在应该已经修复</p>
      <p class="test-instruction">📝 测试步骤：1. 点击题目详情 → 2. 点击"开始解题"打开编辑器 → 3. 跳转到其他页面</p>
    </div>
    
    <div class="test-section">
      <h2>API连接测试</h2>
      <button @click="testApiConnection" class="test-btn" :disabled="apiTesting">
        {{ apiTesting ? '测试中...' : '测试API连接' }}
      </button>
      <div v-if="apiResult" class="api-result">
        <h3>API测试结果:</h3>
        <pre>{{ apiResult }}</pre>
      </div>
    </div>
    
    <div class="test-section">
      <h2>路由信息</h2>
      <div class="route-info">
        <p><strong>当前路径:</strong> {{ $route.path }}</p>
        <p><strong>路由名称:</strong> {{ $route.name }}</p>
        <p><strong>查询参数:</strong> {{ JSON.stringify($route.query) }}</p>
      </div>
    </div>
    
    <div class="test-section">
      <h2>系统状态</h2>
      <div class="system-status">
        <p><strong>Token状态:</strong> {{ hasToken ? '已登录' : '未登录' }}</p>
        <p><strong>用户信息:</strong> {{ userInfo ? '已加载' : '未加载' }}</p>
        <p><strong>API地址:</strong> {{ apiBaseUrl }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { userApi } from '../api/user.js'
import API_CONFIG from '../config/api-config.js'
import logger from '../utils/logger.js'

export default {
  name: 'NavigationTest',
  data() {
    return {
      apiTesting: false,
      apiResult: null,
      hasToken: false,
      userInfo: null,
      apiBaseUrl: ''
    }
  },
  
  methods: {
    navigateTo(path) {
      logger.log(`🧪 [NavigationTest] 尝试跳转到: ${path}`)
      try {
        this.$router.push(path)
        logger.log(`✅ [NavigationTest] 跳转成功: ${path}`)
      } catch (error) {
        logger.error(`❌ [NavigationTest] 跳转失败: ${path}`, error)
        alert(`跳转失败: ${error.message}`)
      }
    },
    
    async testApiConnection() {
      this.apiTesting = true
      this.apiResult = null
      
      try {
        logger.log('🧪 [NavigationTest] 开始测试API连接...')
        
        // 测试简单的API调用
        const response = await userApi.getUserInfo()
        
        this.apiResult = {
          status: 'success',
          message: 'API连接正常',
          data: response.data
        }
        
        logger.log('✅ [NavigationTest] API测试成功:', response)
      } catch (error) {
        this.apiResult = {
          status: 'error',
          message: 'API连接失败',
          error: error.message,
          details: error.response?.data || error.response
        }
        
        logger.error('❌ [NavigationTest] API测试失败:', error)
      } finally {
        this.apiTesting = false
      }
    },
    
    checkSystemStatus() {
      // 检查Token状态
      const token = localStorage.getItem('token')
      this.hasToken = !!token
      
      // 检查用户信息
      const userInfoStr = localStorage.getItem('userInfo')
      this.userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
      
      // 获取API地址
      this.apiBaseUrl = API_CONFIG.getBaseURL()
    }
  },
  
  mounted() {
    logger.log('🧪 [NavigationTest] 页面已加载')
    this.checkSystemStatus()
  }
}
</script>

<style scoped>
.navigation-test {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.test-section {
  background: #f5f5f5;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.test-section h2 {
  margin-top: 0;
  color: #333;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.test-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn:hover:not(:disabled) {
  background: #45a049;
}

.test-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.editor-test {
  background: #ff6b6b !important;
  font-weight: bold;
}

.editor-test:hover:not(:disabled) {
  background: #ff5252 !important;
}

.test-note {
  color: #e74c3c;
  font-style: italic;
  margin-top: 10px;
  padding: 10px;
  background: #ffeaea;
  border-radius: 4px;
  border-left: 4px solid #e74c3c;
}

.test-instruction {
  color: #2c3e50;
  margin-top: 5px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #3498db;
  font-size: 14px;
}

.api-result {
  margin-top: 15px;
  padding: 15px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.api-result pre {
  background: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
  font-size: 12px;
}

.route-info, .system-status {
  background: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.route-info p, .system-status p {
  margin: 5px 0;
}
</style>
